<template lang="pug">
  div
    form#myForm(ref="myForm")
      div
        label 姓名：
        input(type="text" name="name" value="")
      div
        label 手机：
        input(type="text" name="phone" value="")
      div
        label 邮箱：
        input(type="text" name="email" value="")
      div
        label 文件：
        input(type="file" name="file" value="")
    div(v-on:click="formSubmit") 提交
</template>
<script type="text/ecmascript-6">
  import $ from 'jquery'

  export default {
    mounted() {
      $.ajax({
        url: 'http://localhost:6267/JsonHandler.ashx',
        type: 'GET',
        success(data) {
          console.log('data:', data)
        },
        error(err) {
          console.log('ERROR:', err)
        }
      })
    },
    methods: {
      formSubmit() {
        // var form = document.getElementById("myForm");
        let form = this.$refs.myForm
        let fd = new FormData(form)
        $.ajax({
          url: 'http://localhost:6267/Upload.ashx',
          type: 'POST',
          data: fd,
          processData: false,
          // 告诉jQuery不要去处理发送的数据
          contentType: false,
          // 告诉jQuery不要去设置Content-Type请求头
          success: function (response, status, xhr) {
            console.log('response:', response)
          }
        })
        return false
      }
    }
  }
</script>
<style scoped lang="stylus" type="text/stylus">
</style>
